<template>
	<div class="kk-wrap-container" v-loading="loading">
		<div class="kk-wrap">
			<div class="kk-wrap-top">
				<div class="kk-wrap-item">
					<div class="kk-wrap-top-left">
						<img class="kk-star" src="~assets/images/star.png">
						<span class="kk-shop-cate">商品类目:</span>
					</div>
					<div class="kk-wrap-top-right cascader-option">
						<el-select class="legend" v-model="legendValue" placeholder="请选择" @change="selectLegend($event)">
							<el-option
								v-for="item in legend"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="kk-wrap-item">
					<div class="kk-wrap-top-left">
						<img class="kk-star" src="~assets/images/star.png">
						<span class="kk-shop-cate">商品名称:</span>
					</div>
					<div class="kk-wrap-top-right">
						<input class="top-text" v-model="skuName" type="text" placeholder="请输入商品名称">
					</div>
				</div>
			</div>
		</div>
		<div class="kk-wrap-bottom">
			<div class="kk-wrap-item">
				<div class="kk-wrap-top-left">
					<img class="kk-star" src="~assets/images/star.png">
					<span class="kk-shop-cate">开始时间:</span>
				</div>
				<div class="kk-wrap-top-right shop-detail">
					<el-date-picker
					  class="date-time"
						:picker-options="startTimeLimit"
						value-format="yyyy-MM-dd HH-mm-ss"
						v-model="startTime"
						type="datetime"
						placeholder="选择日期时间"
					>
					</el-date-picker>
				</div>
			</div>
			<div class="kk-wrap-item">
				<div class="kk-wrap-top-left">
					<img class="kk-star" src="~assets/images/star.png">
					<span class="kk-shop-cate">结束时间:</span>
				</div>
				<div class="kk-wrap-top-right shop-detail">
					<el-date-picker
					  class="date-time"
						:picker-options="endTimeLimit"
						value-format="yyyy-MM-dd HH-mm-ss"
						v-model="endTime"
						type="datetime"
						placeholder="选择日期时间"
					>
					</el-date-picker>
				</div>
			</div>
			<div class="kk-wrap-update-item">
				<div class="kk-wrap-update-left">
					<img class="kk-star1" src="~assets/images/star.png">
					<span class="kk-shop-cate cate-indent">商品主图:</span>
				</div>
				<div class="kk-wrap-update-right">
					<el-upload
						:action="imgurl"
						list-type="picture-card"
						:file-list="skuImage"
						accept=".jpg,.png"
						:limit="1" 
						:on-preview="handlePictureCardPreview"
						:on-success="uploadImgSuccess"
						:on-error ="uploadImgFail"
						:on-remove="handleRemove"
						:headers="headers"
						:before-upload="beforeAvatarUpload"
						:on-exceed="uploadExceed"
					>
						<i class="el-icon-plus"></i>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,图片尺寸为228*228,且不超过2M,图片最大限量为1张,</div>
					</el-upload>
					<el-dialog	
					:visible.sync="dialogVisible"
					> 
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</div> 
			</div>
			<div class="kk-wrap-update-item">
				<div class="kk-wrap-update-left">
					<img class="kk-star1" src="~assets/images/star.png">
					<span class="kk-shop-cate cate-indent">商品详图:</span>
				</div>
				<div class="kk-wrap-update-right">
					<el-upload
						:action="imgurl"
						list-type="picture-card"
						:file-list="skuDetailUrls"
						accept=".jpg,.png"
						:limit="20" 
						:on-preview="handlePictureCardPreview1"
						:on-success="uploadImgSuccess1"
						:on-error ="uploadImgFail1"
						:on-remove="handleRemove1"
						:headers="headers"
						:before-upload="beforeAvatarUpload1"
						:on-exceed="uploadExceed1"
					>
						<i class="el-icon-plus"></i>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，图片宽度为750,高度不限，且不超过2M,图片最大限量为20张</div>
					</el-upload>
					<el-dialog 
						:visible.sync="dialogVisible1"
					>
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</div> 
			</div>
			<div class="kk-wrap-item">
				<div class="kk-wrap-top-left">
					<img class="kk-star" src="~assets/images/star.png">
					<span class="kk-shop-cate">商品描述:</span>
				</div>
				<div class="kk-wrap-top-right shop-detail">
					 <el-input class="kk-wrap-textarea-w" type="textarea" v-model="skuDetails" placeholder="介绍一下你的商品吧, 最多100字"></el-input>
				</div>
			</div>
			<!-- 优惠价 -->
			<div class="kk-wrap-item kk-wrap-onsale">
        <div class="onsale-list">
					<div class="onsale-item">
						 <div class="onsale">优惠价:</div>
				     <input v-model="ratePrice" type="number" placeholder="￥">
					</div>
					<div class="onsale-item">
						 <div class="onsale">原价:</div>
				     <input v-model="price" type="number" placeholder="￥">
					</div>
					<div class="onsale-item">
						 <div class="onsale">佣金比例:</div>
				     <input v-model="commissionRate" type="number" placeholder="例如0.5">
					</div>
					<div class="onsale-item">
						 <div class="onsale">库存:</div>
				     <input v-model="skuStock" type="text" placeholder="请输入库存">
					</div>
				</div>
			</div>
			<!-- 推荐理由 -->
			<div class="kk-wrap-item">
				<div class="kk-wrap-top-left">
					<img class="kk-star" src="~assets/images/star.png">
					<span class="kk-shop-cate">推荐理由:</span>
				</div>
				<div class="kk-wrap-top-right shop-detail">
					 <el-input class="kk-wrap-textarea-w" type="textarea" v-model="reason" placeholder="推荐理由"></el-input>
				</div>
			</div>
			<div class="kk-wrap-item">
				<div class="kk-wrap-top-left">
					<img class="kk-star" src="~assets/images/star.png">
					<span class="kk-shop-cate">售后服务:</span>
				</div>
				<div class="kk-wrap-top-right shop-detail">
					<div class="day-component">
						<el-select  v-model="saleServer.value" :placeholder="placeText" @change="serverHandler($event)">
							<el-option
								v-for="item in saleServer"
								:key="item.id"
								:label="item.value"	
								:value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div class="kk-wrap-item">
				<div class="kk-wrap-top-left">
					<img class="kk-star" src="~assets/images/star.png">
					<span class="kk-shop-cate kk-shop-tag">请选择标签:</span>
				</div>
				<div class="kk-wrap-top-right1">
				  <el-checkbox 
						v-model="item.checked"
						class="select-checkbox"
					 	v-for="item in tagList" :key="item.id"
						@change="checkboxChange(item)"
					 >{{item.tagName}}
					</el-checkbox>
				</div>
			</div>
			<div 
				class='commit'
				@click="commit"
			>提交
			</div>
		</div>
	</div> 
</template>

<script>
export default {
 	async fetch({store}) {
    await store.commit('setProvideGoods', 0); //初始化的时候设置跳转到默认页面	
  },
  layout: 'internalouts',
  data(){
		return{
			endTimeLimit:{
				disabledDate: time => {
					if (this.startTime) {
						return (
							time.getTime() > new Date(this.startTime).getTime()
						);
					} else {
						return time.getTime() > Date.now();
					}
				}
			},
		  startTimeLimit:{
			 disabledDate: time => {
					if (this.endTime) {
						return (
						time.getTime() > Date.now() ||
						time.getTime() < new Date(this.endTime).getTime()
						);
					} else {
						return time.getTime() > Date.now();
					}
				}
			},
			startTime:"", //开始时间
			endTime:"", //结束时间
			legend:[], //商品类目
			legendValue:'', //商品类目绑定的数据
			tagList:[], //标签
			flag:false,	//控制导入状态
			cmtShow:false,	//控制提交按钮状态的
			dialogImageUrl:"",//预览图片的
			dialogVisible: false, //控制上传图片
			dialogVisible1: false, //控制上传图片
			value: [],
			show:false,
			checked:false,
			placeText:"请选择",
			saleServer:[  //售后服务写死
				{	id:0,	value:'请选择',},
				{ id:1, value:'支持7天无理由退货',},
				{	id:4,	value:'不支持7天无理由退货',},
				{	id:5,	value:'支持7天无理由退货(拆封后不支持)',},
				{	id:6,	value:'支持7天无理由退货(激活后不支持)',},
				{	id:7,	value:'支持7天无理由退货(安装后不支持)',},
				{	id:8,	value:'支持7天无理由退货(定制类不支持)',},
				{	id:9,	value:'支持7天无理由退货(使用后不支持)',},
			],
			/* 快手商品信息新增需要传递的参数 begin */
			cateId: '', //商品分类id
			cateName:'',//类型名称
			commissionRate : "", //佣金比例
			monthSales: "", //月销
			price : "", //原价格
			ratePrice : "", //优惠价格	
			reason : "", //推荐理由
			serviceRule:"",//退款规格
			skuDetails:"", //商品描述
			skuDetailUrls: [], //商品详图
			skuImage: [], //商品主图
			skuName:"",//商品名称
			skuStock : "", //库存
			tagId:[],//标签ID
			// shopId : '1923987201', //店铺ID 暂时写死
			/* 快手商品信息新增需要传递的参数 end */
			limit:[ //是否添加限购 1是 0否
				{
					id:1,
					text:'是',
				},
				{
					id:2,
					text:'否',
				},
			],
			link:'', //商品详情的链接
			// link:'http://localhost:9003/goodsDetail?id=1', //商品详情的链接
			imgurl: `${process.env.APIHOST}/common/fileUpload`, // 图片上传的地址
			/*售后服务的 */
			// server:'',//售后服务绑定的值
			flag :false,//控制提交的
			ksAccount:{},
			headers: {
				token: ''
			},
			test:"" ,//只让弹框出现一次
			value1:"",
			loading:true,
		}	
	},
	created(){
	},
	computed:{
   disabled(){
		 return !this.cateId || !this.propId //如果没有id，则禁用
	 },
	 text2(){ //计算规格
		return this.text1 ? this.text1 : '规格'
	 },
	},
	watch:{ //限制输入框中只能输入数字
		// ratePrice(val){
		// 	this.ratePrice = val.replace(/\D/g,'')
		// },
		// price(val){
		// 	this.price = val.replace(/\D/g,'')
		// },
		// commissionRate(val){
		// 	this.commissionRate = val.replace(/\D/g,'')
		// },
		// skuStock(val){
		// 	this.skuStock = val.replace(/\D/g,'')
		// },

	},
  methods:{
		checkboxChange(item){ //拿到标签ID
      let obj = {}
      obj.id = item.id
      obj.checked = item.checked
      obj.tagName = item.tagName
      if(item.checked){ // 如没有这属性，就在获取全部的数据的自己造这个属性进去
        this.tagId.push(obj) //添加对象
      }else{ // 取消选中 ，就要删除已经勾选的项
        for(let i =0;i<this.tagId.length;i++){
         if(this.tagId[i].id === item.id){
           this.tagId.splice(i,1) //删除 checked变为fasle
         }
        }
      }
		},
		selectLegend(id){ //拿到分类ID,和分类名称
			this.cateId = id;
			let obj = {};
      obj = this.legend.find((item)=>{
				return item.id === id;
			});
      this.cateName = obj.name;
		},
		commit(){//提交按钮
			this.addSupplyGoods();
		},
		serverHandler(id){ //售后服务退款规格
			 this.serviceRule = id //设置售后服务的ID
		},
		// //商品主图
		handleRemove(file, fileList) { //删除图片
			for (const key in this.skuImage) {
				const element = this.skuImage[key];
				if (element.uid == file.uid) {
					this.skuImage.splice(key,1)
				}
			}
		},
		uploadImgSuccess(response, file,fileList) { //图片上传成功操作
			let imgObj = {
				status: file.status,
				uid: file.uid,
				url: response.obj
			}
			this.skuImage.push(imgObj)
		},
		handlePictureCardPreview(file) { //点击放大图片
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		uploadImgFail(res,file){ //图片上传失败时的回调
			this.$message.warning('上传失败')
		},
		beforeAvatarUpload(file){ //商品主图图片上传的限制大小
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		uploadExceed(files,fileList){ //商品主图图片上传的个数限制
			this.$message({
				message:'图片最大上传限量为1张',
				type:'warning',
				duration:1000,
			})
		},
    uploadExceed1(files,fileList){ //商品详图图片上传的个数限制
			this.$message({
				message:'图片最大上传限量为20张',
				type:'warning',
				duration:1000,
			})
		},
		// 商品详图
	  handleRemove1(file, fileList) { //删除图片时的回调
			for (let i in this.skuDetailUrls) { //删除图片操作
				for (let k in this.skuDetailUrls[i]) {
					if (this.skuDetailUrls[i][k] == file.uid) {
						delete this.skuDetailUrls[i];
						break;
					}
				}
			}
		},
		uploadImgSuccess1(response, file,fileList) { //图片上传成功操作
			let imgObj = {
				status: file.status,
				uid: file.uid,
				url: response.obj
			}
			this.skuDetailUrls.push(imgObj)
		},
		handlePictureCardPreview1(file) { //商品详图放大预览图
			this.dialogImageUrl = file.url;
			this.dialogVisible1 = true;
		},
		uploadImgFail1(res,file){ //图片上传失败时的回调
			this.$message.warning('上传失败')
		},
		beforeAvatarUpload1(file){ //商品详图图片上传的限制大小
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		//我要供货请求接口数据
		addSupplyGoodsInit(){	//	新增商品-初始化(商品类型)
			this.loading = true;
			let params = {
			}
			this.$axios.$post('addSupplyGoodsInit',params).then(res => {
				this.loading = false;
				if(res.status === 200 ){
					this.legend = res.obj.prodCateList;
					this.tagList = res.obj.tagList;
				}else{
					this.$message.warning(res.msg)
				}
			})
				.catch(error => {
					this.$message.warning('请求失败');
					this.loading = false;
				})
		},
		addSupplyGoods(){	//	新增商品
		  this.loading = true;
			let mainImgs = [];
			let detailImgs = [];
			this.skuImage.map(item => {
        mainImgs.push(item.url) //商品主图传递给后台时候，去掉url属性
			})
			this.skuDetailUrls.map(item => {
        detailImgs.push(item.url) //商品详图传递给后台时候,去掉url属性
			})
			var labelId = this.tagId.map(item => item.id); //拿到这个tagId组合，以逗号分割传递过去
			let params = {
				cateId : this.cateId, //类型ID
				cateName : this.cateName, //类型名称
				commissionRate : this.commissionRate, //佣金比例
				monthSales : this.monthSales	, //月销	
				price : this.price, //价格	
				ratePrice : this.ratePrice, //优惠价格
				reason : this.reason, //推荐理由
				serviceRule : this.serviceRule, //退款规格
				skuDetails : this.skuDetails, //商品描述
				skuDetailUrls : detailImgs, //商品详情图	
				skuImage : mainImgs, //商品主图	
				skuName : this.skuName, //商品名称
				skuStock : this.skuStock, //库存
				tagId : labelId.join(','), //标签ID
				startTime:this.startTime, //开始时间
				endTime:this.endTime, //结束时间
			}
			let param = JSON.stringify(params)
			this.$axios.$post('addSupplyGoods',param).then(res => {
				this.loading = false;
				if(res.status === 200 ){
          if(this.test){
						this.test.close()
					}
					this.test = this.$message({
						type:"success",
						message:res.msg,
						duration:1000,
					})
					this.$router.push({
						path:'/providegoods/manage',
					})
				}else{
					if(this.test){
						this.test.close()
					}
					this.test = this.$message.warning(res.msg)
					// this.$router.push({
					// 	path:'/providegoods/manage',
					// 	query:{skuName:this.skuName},
					// })
				}
			})
				.catch(error => {
					if(this.test){
						this.test.close()
					}
					this.test = this.$message.warning('请求失败')
				})
				this.loading = false;
		},
	},
	mounted(){
		this.addSupplyGoodsInit()
		this.ksAccount = localStorage.getItem('ksAccount') ? JSON.parse(localStorage.getItem('ksAccount')):{}; //拿到商品ID
		this.headers.token = localStorage.getItem('token') ? localStorage.getItem('token') : '';
	},
}
</script>

<style scoped>
	.kk-wrap{
		background:#ffffff;
		overflow:hidden;
		border-radius:2px;
	}
	.kk-wrap-top{
		padding-bottom:20px;
	}
	.kk-wrap-item{
		display:flex;
		/* height:30px; */
		align-items:center;
		padding-left:20px;
		margin-top:20px;
	}
	.kk-wrap-top-left{
		margin-right:10px;
		display:flex;
		color:#666666
	}
	.kk-star{
		width:7px;
		height:7px;
		margin-right:1px;
		margin-top:4px;
	}
	.kk-star1{
		width:7px;
		height:7px;
		margin-right:-8px;
	}
	.select-width{
		width:354px;
		height:30px;
	}
  .select-width /deep/ .el-input__inner{
		height:30px;
		line-height:30px;
    padding: 0 12px 0 10px;
	}
	.select-width /deep/ .el-input__icon{
		line-height:30px;
	}
	.top-text{
		height:30px;
		text-indent:12px;
		width:354px;
		border:1px solid #e1e1e1;
		border-radius:2px;
		box-sizing:border-box;
	}
	.top-text:focus{
		border:1px solid #0096e6;
	}
	@media screen and (min-width:1200px){
		.top-text{
			width:557px;
		}
	}
	.top-import{
		width:70px;
		height:30px;
		line-height:30px;
		text-align:center;
		cursor:pointer;
		user-select:none;
		color:#333333;
		border-radius:15px;
		background:#0096e6;
		color: #fff;;
		margin-left:23px;
	}
	.top-import:hover{
		background:#66B1FF; 
	}
	.kk-wrap-top-right{
		display:flex;
	}
	.legend /deep/ .el-input input{
		height:30px;
		width:354px;
	}
	@media screen and (min-width:1200px){
		.legend /deep/ .el-input input{
			height:30px;
			width:557px;
		}
	}
	.legend /deep/ .el-input .el-input__icon{
		line-height:30px;
	}
	.cate-indent{
		text-indent:9px;
		white-space:nowrap;
	}
	.kk-wrap-bottom{
		margin-top:20px;
		background:#ffffff;
		overflow:hidden;
		padding-bottom:40px;
	}
	.kk-wrap-bottom-item{
		display:flex;
		align-items:center;
		padding-left:20px;
		margin-top:20px;
	}
	.kk-wrap-bottom-right{
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.red-text{
		width:200px;
		height:27px;
		font-size:12px;
		font-weight:400;
		color:rgba(231,53,71,1);
		margin-left:20px;
		line-height: 1.3;
    margin-top: -10px;
	}
	.top-regular{
		width:354px;
		height:140px;
		border:1px solid rgba(225,225,225,1);
		border-radius:4px;
		margin-right:20px;
		display:flex;
		justify-content:center;
		align-items:center;
		box-sizing:border-box;
		cursor:pointer;
	}
	.add-regular{
		display:flex;
		user-select:none;
	}
	.add-text{
		margin-left:5px;
	}
	.kk-wrap-update-item{
		height:100%;
		display:flex;
		align-items:center;
		padding-left: 20px;
		margin-top: 20px;
	}
	.kk-wrap-update-left{
		display:flex;
		justify-content:center;
		align-items:center;
		margin-right:10px;
	}
	.kk-wrap-update-right{
		border-radius:4px;
		display:flex;
		align-items:center;
		justify-content:center;
		box-sizing:border-box;
		cursor:pointer;
	}
	.kk-shop-cate{
		color:#666666;
		user-select:none;
	}
	.commit{
		width: 70px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		cursor: pointer;
		user-select: none;
		background:#0096e6;
		color: #fff;
		border-radius: 15px;
		margin-left: 96px;
		margin-top:40px;
	}
	.commit:hover{
		background:#66B1FF;
	}
	.kk-wrap-bottom .active{
		color:#ffffff;
		background:#0096e6;
	}
	input::-webkit-input-placeholder{
		color:#C0C4CC;
	}
	input::-moz-input-placeholder{
		color:#C0C4CC;
	}
	input:-ms-input-placeholder{
		color:#C0C4CC;
	}
	/deep/ .el-upload--picture-card{
		background-color:#ffffff;
	}
	/* begin shopRegular */
	.regular-container{
		width:585px;
		border:1px solid rgb(221, 221, 221);
		border-radius:4px;
	}
	.regular-header{
		height:60px;
		background:#F8F8F8;
		display:flex;
		align-items:center;
		padding:10px 20px;
		box-sizing:border-box;
		margin-bottom: 22px;
	}
	.regular-component,.day-component{
		display:flex;
	}
	.day-component /deep/ .el-input__inner{
		width:585px;
	}
	.regular-add-wrap{
		display:flex;
		align-items:center;
		padding:10px 20px;
		box-sizing:border-box;
	}
	.regular-add-list{
    margin-bottom: 10px;
		display:flex;
		flex-wrap: wrap;
		margin-left: 5px;
	}
	.regular-add-item{
		display: flex;
    margin-left: 10px;
    align-items: center;
    justify-content: center;
		padding: 2px 4px 4px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
		margin-bottom:10px;
	}
	.del-btn{
		margin-left:5px;
	}
	.close-img{
		width: 13px;
	height: 13px;
    margin-left: 5px;
    margin-top: 3px;
    cursor: pointer;
	}
	.close-img img{
		width:100%;
		height:100%;
	}
	.regular-bottom{
		display:flex;
		padding:10px 20px;
	}
	.regular-bottom-input{
		width:150px;
	}
  .regular-bottom-input /deep/ .el-input__inner{
		height:30px;
	}
	.btn-left{
		margin-left:20px
	}
	/* end shopRegular */
	/* begin regular */
	.regular-item{
		display:flex;
		height:37px;
		align-items:center;
		justify-content:center;
		text-align:center;
	}
	.regular{
		width:110px;
	}
	.save{
		width:145px;
	}
	.price{
		width:130px;
	}
	.sku-encode{
		width:200px;
	}
	.regular-item:nth-child(odd){
		background:#FAFAFA;
	}
	.one{
		height:70px;
	}
	.el-width1{
		width:88px;
	}
  .el-width2{
		width:189px;
	}
	.el-width1 /deep/ .el-input__inner,.el-width2 /deep/ .el-input__inner{
		height:30px;
	}
	/* end regular */
	.kk-wrap-textarea-w{
		width:585px;
		height:100px;
	}
	/* 修整页面 */
	.kk-wrap-onsale{
		margin-top:20px;
		margin-bottom:0;
		max-width: 700px;
		color:#666666;
	}
	.onsale-list{
		display:flex;
		flex-wrap:wrap;
	}
 	.onsale-item{
		display:flex;
		height:30px;
		align-items:center;
		margin-right:22px;
		margin-bottom:20px;
 	}
 	.onsale-item .onsale{
		white-space: nowrap;
    margin-right: 11px;
		width:65px;	
		text-align: right;
 	}
 	.onsale-item input{
		height: 30px;
		max-width:130px;
		text-indent: 10px;
		width: 354px;
		border: 1px solid #e1e1e1;
		border-radius: 2px;
		box-sizing: border-box;
 	}
	.onsale-item input:focus{
		border:1px solid #0096e6;
	}
 	.kk-wrap-top-right1{
	  width:585px;
		flex-wrap:wrap;
 	}
 	.kk-wrap-top-right1 .select-checkbox,
	.kk-shop-tag{
	  margin-bottom:10px;
 	}
	.shop-detail /deep/ .el-input__icon .el-icon-time{
		display:none;
	}
	.shop-detail /deep/ .el-icon-time:before {
		content:"";
	}
	.shop-detail /deep/ .el-input__inner {
		height:30px;
	}
	.date-time {
		width:300px;
		height:30px;
	}
</style>
